<template>
  <el-carousel
    :interval="0"
    class="swiper-list"
    indicator-position="outside"
    arrow="never"
    height="150px"
  >
    <el-carousel-item v-for="(item,index) in swiperList" :key="index" class="swiper-box">
      <div class="item_list" v-for="(list,index2) in item" :key="index2">
        <a :href="list.web_link">
          <img :src="list.web" alt />
        </a>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      swiperList: []
    };
  },
  computed: {},

  watch: {},

  methods: {
    /*
     * @description 轮播图请求
     * @param  swiper
     */
    reqSwiper() {
      this.$api.index.swiper().then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.swiperList = this.dealData(res.data.data.banners);
        }
      });
    },
    /*
     * @description 轮播图数据加工
     */
    dealData(arr) {
      var result = [];
      var chunk = 4;
      for (var i = 0; i < arr.length; i += chunk) {
        result.push(arr.slice(i, i + chunk));
      }
      return result;
    }
  },

  created() {},

  mounted() {
    this.reqSwiper();
  }
};
</script>
<style lang="less" scoped>
.b {
  border: solid 1px red;
}

.swiper-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  .item_list {
    img {
      width: 264px;
      height: 124px;
      box-sizing: border-box;
      border-radius: 12px;
      overflow: hidden;
      border: 2px solid hsla(0, 0%, 100%, 0.16);
    }
    img:nth-of-type(1),
    img:nth-of-type(2),
    img:nth-of-type(3) {
      margin-right: 42px;
    }
  }
}
</style>